<template>
    <div class="reports">
        <el-card class="box-card">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>数据统计</el-breadcrumb-item>
                <el-breadcrumb-item>数据报表</el-breadcrumb-item>
            </el-breadcrumb>
            <div id="myChart"></div>
        </el-card>
    </div>
</template>
<script>
import echarts from 'echarts'
import {getExcharts} from '../../http/api'
export default {
    data() {
        return {
            option: {}
        }
    },
    methods:{
        async getExcharts(){
            const res = await getExcharts();
            console.log(res)
            this.option = res;
            let myChart = echarts.init(document.getElementById('myChart'))
            myChart.setOption({
                ...this.option,
                // legend: { //标志对应的折线图，点击legend标志会隐藏对应的折线图
                //     data: res.legend.data
                // },
                // xAxis: {
                //     type: 'category',   // 还有其他的type，可以去官网喵两眼哦
                //     data: res.xAxis[0].data,   // x轴数据
                //     //name: '日期',   // x轴名称
                //     // x轴名称样式
                //     nameTextStyle: {
                //         fontWeight: 600,
                //         fontSize: 18
                //     }
                // },
                // yAxis: {
                //     type: res.yAxis[0].type,
                //     //name: '纵轴名称',   // y轴名称
                //     // y轴名称样式
                //     nameTextStyle: {
                //         fontWeight: 600,
                //         fontSize: 18
                //     }
                // },
                tooltip: { //鼠标放到折线图上展示的数据展示样式
                    trigger: 'axis',   // axis   item   none三个值
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                // series: res.series //对应每条折线的名称
            })
        }
    },
    created(){
        this.getExcharts();
    }
}
</script>
<style lang="scss" scoped>
.reports {
    height: 100%;
    .box-card{
        width: 100%;
        height: 100%;
    } 
    #myChart{
        width: 800px;
        height: 500px;
    }
}     
</style>